/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text, useTheme,} from "customize-easy-ui-component";
import {ReportViewProps,} from "../../common/base";
import {末尾链接, 落款单位地址,} from "../../common/rarelyVary";
import {ConclusionDzglWbVw, } from "./ConclusionDzglWb";
import {useRepMenuDirItems} from "../../hook/useMainRepUrlOr";
import {首页设备概况DzglW, } from "./rarelyVary";
import {VsProjects默认} from "./editor";
import {useItemsMapPressure} from "../../common/pressure";
import {注意事项MVS, } from "../../movable/rarelyVary";
import {ReportFirstPageHeadNmaNmbm, } from "../../contain/rarelyVary";
import {InspectionItemVw} from "./InspectionItem";
import {DrawingsExplanVw} from "./DrawingsExplan";


export const ReportView: React.FunctionComponent<ReportViewProps> = ({
    repId,   source: orc,  verId,rep,
}) => {
    const theme= useTheme();
    const [mapFxian]=useItemsMapPressure({ projects:orc.Projects });
    //报告遗留的旧Projects必须删除，否则可能无法显示导航按钮。
    const [rootMenu]=useRepMenuDirItems(VsProjects默认, orc.Projects, `/reportView/${rep?.modeltype}/ver/${verId}/${repId}`);
    return (
        <React.Fragment>
            {rootMenu}
            <div css={{"@media not print": {marginTop: '1rem', marginBottom: '1rem'}}}>
            <div css={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between',
                "@media print": {height: '100vh', pageBreakInside: 'avoid',}
            }}>
                {ReportFirstPageHeadNmaNmbm({theme, rep, mbbm: 'FJB/TM-1007-1-0-2022'})}
                <div>
                    <Text variant="h3" css={{
                        textAlign: 'center',
                        "@media (min-width:690px),print and (min-width:538px)": {
                            fontSize: theme.fontSizes[6],
                        }
                    }}>
                      电站锅炉外部检验报告
                    </Text>
                    <br css={{"@media not print": {display: 'none'}}}/>
                    <Text variant="h5" css={{textAlign: 'center',}}> （ FJB/GH-1004-0-2021 ）</Text>
                </div>
                <div>
                    {首页设备概况DzglW({theme, orc, rep})}
                </div>
                <div css={{textAlign: 'center', "@media print": {pageBreakInside: 'avoid'}}}>
                    {落款单位地址}
                </div>
            </div>
            {注意事项MVS({
                rep,
                comply: '书为依据《锅炉安全技术规程》(TSG 11-2020)制定，适用于电站锅炉外部检验报告的结论报告，检验结论仅代表该设备在检验时的安全状况'
            })}

            <ConclusionDzglWbVw orc={orc} rep={rep}/>
            {/*因为前面加了逻辑&&条件所以不能直接用#hook报错哦 {mapFxian.get('主要受压元件情况')?.do &&  主要受压元件({theme, orc, rep}) }*/}
            <InspectionItemVw orc={orc} rep={rep}/>

            <DrawingsExplanVw orc={orc} rep={rep} table='联络单' reserve='6.5rem'  title={'外部检验附页'}/>
        </div>
        {末尾链接({template: rep?.modeltype, verId, repId: repId || ''})}
    </React.Fragment>
    );
}
